<template>
	<view class="wrap">
		<view class="selectCondition" style="background-color: white;" v-show="false">
			<view class="search" @click="searchOragins">
				<u-search :show-action="false" :clearabled="true" v-model="orgins" placeholder="请选择厂站"></u-search>
				<u-select v-model="showOragins" :list="station" @confirm="confirmOrgin"></u-select>
			</view>
			<view class="search" @click="searchState">
				<u-search mode="single-column" :show-action="false" v-model="statuss" placeholder="请选择状态"></u-search>
				<u-select v-model="showStates" :list="states" @confirm="confirmState"></u-select>
			</view>
			<view class="selectItem">
				<u-button @click="searchQeuipmentInfo" class="searchButton" type="primary" size="mini"
					shape="square">查询</u-button>
			</view>
		</view>

		<u-search @clear='searchClear' :clearabled="true" v-model="equipName" @custom="searchEqName"
			@search="searchEqName"></u-search>
		<view class="" style="background:red;margin-bottom:48rpx">
			筛选
		</view>

		<scroll-view class="scroll-list" scroll-y="true">
			<view class="view-container">
				<view class="header" v-for="item in equipInfo" :key="item.id">
					<u-avatar class="avatar" :size="106"
						src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"></u-avatar>
					<view class="details">
						<view>{{item.equipment_name}}</view>
						<view><span>设备编号：</span>{{item.equip_id}}</view>
						<view><span>安装位置：</span>{{item.useplace}}</view>
						<view v-if="item.network_status==0"><span>网络状态：</span>离线</view>
						<view v-else><span>网络状态：</span>在线</view>
					</view>
					<view v-if="item.status==1" class="status-badge status-1">异常</view>
					  <view v-else-if="item.status==2" class="status-badge status-2">运行</view>
					  <view v-else-if="item.status==3" class="status-badge status-3">停止</view>
					  <view v-else class="status-badge status-4">维修维护</view>
				</view>
			</view>


			<!-- 	<u-card v-for="item in equipInfo" :key="item.id" class="task-list-item" :show-head="false" :border="true"
				padding="20" margin="20rpx" :head-border-bottom="false"> -->
			<!-- <view class="" slot="body"> -->
			<!-- <u-row gutter="16">
						<u-col span="12">
							<view class="apply-text" style="display: flex; align-items: center;">
								<text>{{item.equipment_name}}</text>
								<image v-if="item.isAlarm>0" style="width: 50rpx;height: 40rpx; margin-left:16rpx;"
									src="~@/static/aidex/falarm.png" mode=""></image>
							</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>设备编号：</span>{{item.equip_id}}</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>设备型号：</span>{{item.equipment_typecode}}</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>安装日期：</span>{{item.usetime}}</view>
						</u-col>
						<u-col span="12">
							<view class="apply-text"><span>安装位置：</span>{{item.useplace}}</view>
						</u-col>
						<u-col span="12">
							<view v-if="item.status==1" class="apply-text"><span>状态：</span>异常</view>
							<view v-else-if="item.status==2" class="apply-text"><span>状态：</span>运行</view>
							<view v-else-if="item.status==3" class="apply-text"><span>状态：</span>停止</view>
							<view v-else class="apply-text"><span>状态：</span>维修维护</view>
						</u-col>
						<u-col span="12">
							<view v-if="item.network_status==0" class="apply-text"><span>网络状态：</span>离线</view>
							<view v-else class="apply-text"><span>网络状态：</span>在线</view>
						</u-col>
					</u-row> -->
			<!-- </view> -->
			<!-- <view @click="details(item.id)" class="apply-list-foot" slot="foot" style="text-align: right;">
					查&nbsp;&nbsp;&nbsp;&nbsp;看
				</view>
			</u-card> -->
			<u-divider v-if="this.loading">已经到底了</u-divider>
			<u-divider v-else-if="!this.loading">正在加载中</u-divider>
		</scroll-view>
		<!-- </view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading: '',
				showOragins: false,
				showStates: false,
				shows: true,
				show: false,
				orgins: '',
				statuss: '',
				station: [{
						value: '',
						label: ''
					},

				],
				states: [{
						value: '2',
						label: '运行'
					},
					{
						value: '3',
						label: '停止'
					},
					{
						value: '1',
						label: '异常'
					},
					{
						value: '4',
						label: '维修维护'
					}

				],
				originId: '',
				equipStatus: '',
				equipName: '',
				headOrgin: 0,
				//设备列表信息
				equipInfo: []
			}
		},
		onLoad() {
			this.getOrginList();
		},


		methods: {
			search(value) {
				this.$u.toast('搜索内容为：' + value)
			},
			searchOragins() {
				this.showOragins = true;
				if (this.orgins.length != 0) {
					this.showOragins = false;
					this.originId = '';
				}
			},
			searchClear() {
				this.equipName = ''
				this.searchQeuipmentInfo()
			},
			searchState() {
				this.showStates = true;
				if (this.statuss.length != 0) {
					this.showStates = false;
					this.equipStatus = '';
					return;
				}
			},
			searchEqName(e) {
				this.equipName = e
				this.searchQeuipmentInfo(e)
			},
			confirmOrgin(e) {
				e.map((val, index) => {
					this.orgins = val.label;
					this.originId = val.value;
				})
			},
			confirmState(e) {

				e.map((val, index) => {
					this.statuss = val.label;
					this.equipStatus = val.value;
				})
			},
			//获取下拉厂站
			getOrginList() {
				this.$u.api.search({
						"algorithmProcessId": "getStationEq",
						"param": {
							"data": {
								"user_uuid": uni.getStorageSync('uuid')
							}
						}
					})
					.then(result => {
						let station = result.data.data.result || [];
						this.station = station.map(item => {
							return {
								value: item.id,
								label: item.structure_name
							};
						});
						if (station.length > 1) {
							//用户是集团的
							this.headOrgin = 1
						} else if (station.length == 1) {
							//用户属于分厂
							this.headOrgin = 0;
						}

					});

			},
			//查询设备列表
			searchQeuipmentInfo(equipName) {
				console.log(equipName, 'equipName')
				//     const cachedData = uni.getStorageSync('equipInfo');

				//     if (cachedData) {
				//         this.equipInfo = JSON.parse(cachedData);
				//         this.loading = true;
				//         return;
				//     }

				this.$u.api.searchEquipList({
					"algorithmProcessId": "getFalarmCount",
					"param": {
						"data": {
							"station_id": uni.getStorageSync('navId'),
							"status": this.equipStatus,
							"equipName": equipName
						}
					}
				}).then(res => {
					const equipInfo = res.data.data.result || [];
					this.equipInfo = equipInfo.map(item => ({
						id: item.id,
						equipment_name: item.equipment_name,
						equip_id: item.equip_id,
						equipment_typecode: item.equipment_typecode,
						usetime: item.usetime,
						useplace: item.useplace,
						status: item.status,
						network_status: item.network_status,
						isAlarm: item.is_alarm
					}));

					this.loading = true;
					// uni.setStorageSync('equipInfo', JSON.stringify(this.equipInfo));
					console.log(this.equipInfo, "this.equipInfo")
				}).catch(error => {
					console.error(error);
				});
			},
			details(id) {
				uni.navigateTo({
					url: '/pages/sys/workbench/add-form?id=' + id
				});
			}

		},
		onTabItemTap() {
			//在点击底部菜单的时候,获取厂站列表，获取默认厂站的数据
			setTimeout(() => {
				if (this.headOrgin == 1) {
					this.originId = uni.getStorageSync('navId');
					this.equipStatus = '';
					this.orgins = '水厂';
					this.searchQeuipmentInfo();
				} else if (this.headOrgin == 0) {
					this.originId = this.station[0].value;
					this.equipStatus = '';
					this.orgins = '' + this.station[0].label;
					this.searchQeuipmentInfo();
				}
			}, 1000)
		}

	}
</script>
<style lang="scss">
	.scroll-list {
		background-color: #fff;
	}

	.wrap {
		padding: 24rpx;
	}

	.wrap .search {
		background: #ffffff;
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;
		height: 50rpx;

		span {
			color: #999999;
		}
	}


	.apply-list-foot {
		font-size: 28rpx;
	}


	.searchButton {
		height: 50rpx;
	}

	.selectCondition {
		background-color: #fff;


		.search {
			display: inline-block;
			width: 300rpx;

		}

		.selectItem {
			display: contents;

		}

	}

	.view-container {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		position: relative;

		.header {
			display: flex;
			align-items: center;
			border: 2rpx solid #c5c5b6;
			margin-bottom: 24rpx;
			padding: 24rpx;

			.avatar {
				margin-right: 48rpx;
			}

			.details {
				display: flex;
				flex-direction: column;

				&> :nth-child(1) {
					color: #333;
					font-weight: bolder;
				}

				&> :nth-child(2) {
					color: rgb(138, 138, 138);
				}

				&> :nth-child(3) {
					color: rgb(138, 138, 138);
				}

				&> :nth-child(4) {
					color: rgb(138, 138, 138);
				}
			}

			.status-badge {
				position: absolute;
				right: 2rpx;
				background: rgb(248, 173, 64);
				color: #fff;
				padding: 0 24rpx;
				font-size: 24rpx;
				border-radius: 80rpx 0 0 60rpx;
				text-align: center;
				height: 42rpx;
				line-height: 42rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: -128rpx;
			}

			.status-1 {
				background-color: #d9b44c;
			}

			.status-2 {
				background-color: #32cd32; 
			}

			.status-3 {
				background-color: #ff4500;
			}

			.status-4 {
				background-color: #00bfff; 
			}
		}
	}
</style>